<template>
	<view>
		<image class="center_bg" mode='aspectFill'
			src='https://img.zcool.cn/community/01dc5161779c2611013f22cf410b2f.jpg@520w_390h_1c_1e_2o_100sh.jpg'>
		</image>
		<view class="avatar-warp">
			<image class="avatar" mode='aspectFill' src='../../static/fish.jpg' @click="toMyInfo()"></image>
			<view class="nickname">周志贤</view>
			<view class="user-info">
				前端开发工程师
			</view>

			<view class="article-info">
				<view class="article-item">
					<text class="num">21</text>周岁
				</view>
				<view class="article-item">
					<text class="num">半年</text>工作经验
				</view>
				<view class="article-item">
					<text class="num">广州</text>Base
				</view>
			</view>
		</view>

		<view class="content">


			<view class="myitem">
				<u-cell-item icon="plus" icon-style="istyle" :border-bottom="border" :title-style="style" title="创建简历"
					@click="toCreate()"></u-cell-item>
				<u-cell-item icon="account" icon-style="istyle" :border-bottom="border" :title-style="style"
					title="账户与资料" @click="toMyInfo()"></u-cell-item>
			</view>

			<view class="myitem">
				<u-cell-item icon="server-fill" icon-style="istyle" :border-bottom="border" :title-style="style"
					title="帮助与反馈"></u-cell-item>
				<u-cell-item icon="edit-pen" icon-style="istyle" :border-bottom="border" :title-style="style"
					title="评价ResumeTemplate"></u-cell-item>
				<u-cell-item icon="zhuanfa" icon-style="istyle" :border-bottom="border" :title-style="style"
					title="分享ResumeTemplate"></u-cell-item>
				<u-cell-item icon="info-circle" icon-style="istyle" :border-bottom="border" :title-style="style"
					title="关于我们"></u-cell-item>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				border: false,
				style: {
					'font-size': '26rpx',
					'font-weight': 'bold'
				},
				istyle: {
					'size': '12rpx'
				}
			}
		},
		methods: {
			toMyInfo() {
				// uni.navigateTo({
				// 	url: '../myInfo-detail/myInfo-detail'
				// })
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes.authResult);
				  }
				});
				
				
			},
			toCreate() {
				uni.navigateTo({
					url: '../basic-info/basic-info'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #e0e2fb;
		height: 100vh;
	}

	.center_bg {
		width: 100%;
		position: absolute;
		height: 330rpx;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.avatar-warp {
		margin: 160rpx 30rpx 0;
		background: rgba(255, 255, 255, 0.99);
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 2;
	}

	.avatar-warp .avatar {
		display: block;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		margin: 0 auto;
		position: relative;
		top: -80rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.4);
		margin-bottom: -80rpx;
	}

	.nickname {
		text-align: center;
		font-size: 46rpx;
		font-weight: bold;
		padding: 20rpx 0 10rpx;
	}

	.user-info {
		text-align: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #999;
	}

	.user-info image {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		vertical-align: top;
		margin-right: 8rpx;
	}

	.article-info {
		overflow: hidden;
		padding: 40rpx 0;
	}

	.article-item {
		width: 33%;
		float: left;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		border-right: 1px solid #ededed;
	}

	.article-info .article-item:last-child {
		border-right: none;
	}

	.article-item .num {
		font-size: 46rpx;
		display: block;
		padding-bottom: 8rpx;
		color: #222;
		font-weight: bold;
	}

	.content {
		/* background: #f3f3f3; */
		height: auto;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		margin: 40rpx 30rpx 0;
		background: rgba(243, 243, 243, 0);
	}

	.sleep-info {
		background-color: #f3f3f3;
		height: 250rpx;
		width: 100%;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		background-size: 100% 100%;
		padding: 30rpx;
	}

	.header {
		display: flex;
		align-items: center;
		color: #82668b;
	}

	.header>text {
		font-size: 24rpx;
		font-weight: 550;
		margin-left: 30rpx;
	}

	.sleep-info .main {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		font-size: 52rpx;
		font-weight: 520;
		color: #757575;
		text-align: center;
	}

	.myitem {
		background-color: #ffffff;
		width: 100%;
		padding: 18rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		background-size: 100% 100%;
	}
</style>
